<template>
    <div class="loginBox">
        <img src="../images/购物车.png" alt="" class="car">
        <span @click="showModal" v-if=!$store.state.isLogin class="loginGet">登录/注册</span>
        <a-dropdown v-else style="float: left">
            <a class="ant-dropdown-link nickname" @click="e => e.preventDefault()">
                {{$store.state.userInfo.nickname}} <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
                <router-link :to="{path:'/myIndex/mine'}" tag="a-menu-item">
                    <a href="javascript:;">个人中心</a>
                </router-link>
                <a-menu-item>
                    <a href="javascript:;">我的课程</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">我的订单</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;" @click="exit">退出登录</a>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
<!--        登录-->
        <a-modal :footer="null" v-model="$store.state.visible"  @ok="handleOk">
            <div class="loginTitle">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="普通登录" class="normalLogin">
                        <ul>
                            <li>
                                <a-form layout="inline" :form="form" @submit="handleSubmit">
                                    <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                                        <a-input
                                                v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                                                placeholder="请输入账号"
                                        >
                                            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                                        </a-input>
                                    </a-form-item>
                                    <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                                        <a-input
                                                v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                                                type="password"
                                                placeholder="请输入密码"
                                        >
                                            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                                        </a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                                            登录
                                        </a-button>
                                    </a-form-item>
                                </a-form>
                            </li>
                        </ul>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="手机登录" force-render class="phoneLogin">
                        <ul>
                            <li>
                                <a-form>
                                    <a-form-item>
                                        <a-input placeholder="请输入手机号" v-model="phone">
                                            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                                        </a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-input placeholder="请输入验证码" class="code" v-model="getCode">
                                            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                                        </a-input>
                                        <a-button type="primary" html-type="submit" class="getCode" @click="getPhoneCode">
                                            获取验证码
                                        </a-button>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button type="primary" html-type="submit" @click="usePhoneLogin">
                                            登录
                                        </a-button>
                                    </a-form-item>
                                </a-form>
                            </li>
                        </ul>
                    </a-tab-pane>
                </a-tabs>
            </div>

            <ul class="loginFooter">
                <li class="registerNow" @click="showModelGet">立即注册！</li>
                <li class="forgetPassword">忘记密码？</li>
            </ul>
        </a-modal>

<!--        注册-->
        <a-modal :footer="null" v-model="$store.state.visibleGet"  @ok="handleOkGet" class="getUser">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="立即注册" class="getUserName" style="width: 100%">
                        <div>
                            <div class="leftTitle"><span>* </span>账号：</div>
                            <input v-model="getAddId"  type="text" class="rightCon addId" placeholder="请输入账号（6-20位，非纯数字）！">
                        </div>
                        <div class="addIdPrompt prompt"></div>
                        <div>
                            <div class="leftTitle"><span>* </span>密码：</div>
                            <input v-model="getAddPwd" type="password" class="rightCon addPwd" placeholder="请输入你的密码（6-20位，非汉字）！">
                        </div>
                        <div class="addPwdPrompt prompt"></div>
                        <div>
                            <div class="leftTitle"><span>* </span>确认密码：</div>
                            <input v-model="getAddSurePwd" type="password" class="rightCon addSurePwd" placeholder="请在此输入你的密码！">
                        </div>
                        <div class="addSurePwdPrompt prompt"></div>
                        <div>
                            <div class="leftTitle"><span>* </span>昵称：</div>
                            <input v-model="getAddName" type="text" class="rightCon addName" placeholder="请输你的昵称！">
                        </div>
                        <div class="addNamePrompt prompt"></div>
                        <div>
                            <div class="leftTitle"><span>* </span>手机号码：</div>
                            <div class="choosePhone"><span>+86<img src="images/下箭头.png" alt=""></span></div>
                            <input type="text" v-model="addPhone" class="rightCon rightConPhone addPhone" placeholder="请输入你的手机号！">
                        </div>
                        <div class="addPhonePrompt prompt"></div>
                        <div class="sureBox">
                            <div class="leftTitle"><span>* </span>验证码：</div>
                            <input type="text" v-model="addSure" class="rightCon sure addSure" placeholder="请输入验证码！">
                            <button @click="getAddCode" class="getSureCode">获取验证码</button>
                        </div>
                        <div class="addSurePrompt prompt"></div>
                        <div>
                            <input type="submit" value="注 册" id="getPwd" @click="getNumber">
                        </div>
                    </a-tab-pane>
                </a-tabs>

            <ul class="loginFooter getLoginFooter">
                <li class="goLogin" @click="goShowModal">去登陆</li>
            </ul>
        </a-modal>


        <a-avatar :size="32" icon="user" v-if=!$store.state.isLogin />
        <span  class="ant-avatar" v-else><img :src="$store.state.userInfo.avatarUrl" alt=""></span>
    </div>
</template>

<script>
    import {addSure, getNum, logout, ordinaryLogin, phoneCode, phoneLogin} from "../api/api";
    function hasErrors(fieldsError) {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    export default {
        name: "Login",
        data(){
            return{
                value: '',
                hasErrors,
                // visible: false,
                width:300,
                username:'',
                password:'',
                dataList:'',
                //验证码
                getCode:'',
                phone:'',
                form: this.$form.createForm(this, { name: 'horizontal_login' }),
            //    注册手机验证码
                addSure:'',
            //    注册
                addPhone:'',
                getAddName:'',
                getAddSurePwd:'',
                getAddPwd:'',
                getAddId:''
            }
        },
        methods:{
            //获取验证码
            getPhoneCode(){
                phoneCode(this.phone).then(res=>{
                    console.log(res)
                })
            },
            //验证码登录
            usePhoneLogin(){
                phoneLogin(this.phone,this.getCode).then(res=>{
                    console.log(res)
                    this.$store.commit('changeIsLogin',{
                        isLogin:!this.$store.state.isLogin,
                        userInfo:res.data.userInfo
                    })
                    this.$store.commit('changeVisible',false)
                })
            },
            //注册手机验证码

            //判断是否有缓存
            // haveLocalStorage(key){
            //     if(localStorage.getItem(key)){
            //         this.isLogin = true
            //
            //         return true
            //     }else{
            //         return false
            //     }
            // },

            showModal() {
                // this.visible = true;
                this.$store.commit('changeVisible',true)

            },
            goShowModal() {
                // this.visible = true;
                this.$store.commit('changeVisible',true)
                this.$store.commit('changeVisibleGet',false)

            },
            showModelGet(){
                this.$store.commit('changeVisible',false)
                this.$store.commit('changeVisibleGet',true)
            },
            //登录
            handleOk(e) {
                console.log(e);
                // this.visible = false;
                this.$store.commit('changeVisible',false)
            },
            //注册
            handleOkGet(e) {
                console.log(e);
                // this.visible = false;
                this.$store.commit('changeVisibleGet',false)
            },
            //注册验证码
            getAddCode(){
                addSure(this.addPhone).then(res => {
                    console.log(res.data.msg)
                    alert(res.data.msg)
                })
            },
            //注册账号
            // getNum(addSure,addPhone,getAddName,getAddPwd,getAddId)
            getNumber(){
                getNum(this.addSure,this.addPhone,this.getAddName,this.getAddPwd,this.getAddId).then(res => {
                    console.log(res)
                    alert(res.data.msg)
                })
            },

            // Only show error after a field is touched.
            userNameError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('userName') && getFieldError('userName');
            },
            // Only show error after a field is touched.
            passwordError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        this.username = values.userName;
                        this.password = values.password;
                        ordinaryLogin(this.username,this.password).then(res => {
                            if(res.data.code === 0){

                                //存入缓存
                                // localStorage.setItem("dataList",JSON.stringify(res))


                                // console.log(res)
                                // console.log(JSON.parse(localStorage.getItem("this.dataList")))
                                this.$message.success(

                                    res.data.msg,
                                    3,
                                    this.visible=false
                                );
                                //改变全局isLogin和userInfo
                                this.$store.commit('changeIsLogin',{
                                    isLogin:!this.$store.state.isLogin,
                                    userInfo:res.data.userInfo
                                })
                                this.$store.commit('changeVisible',false)

                            }else{
                                this.$message.error(res.data.msg,3);
                            }

                        })
                    }
                });

            },
            //登录tab切换
            callback(key) {
                console.log(key);

            },
            exit(){
                logout().then(res => {
                    console.log(res)

                    //清除缓存
                    // localStorage.clear();

                    this.$store.commit('changeIsLogin',{isLogin:!this.$store.state.isLogin})

                    // this.isLogin = !this.isLogin
                    if(this.$route.path == '/myIndex/mine'){
                        this.$router.replace({ path: '/myIndex/index'})
                    }
                })
            },
        },
        created() {


            this.$store.dispatch("asyncChangeLogin")
            console.log(this.$store.state.isLogin)
            console.log(this.$store.state)

            //取出缓存
            // if(this.haveLocalStorage("dataList")){
            //     // 存储
            //     this.dataList = JSON.parse(localStorage.getItem("dataList"))
            //     this.nickname = this.dataList.data.userInfo.nickname
            //     this.avatarUrl = this.dataList.data.userInfo.avatarUrl
            //
            // }


        },
    }
</script>

<style scoped>
    /*头像*/
    >>>.ant-avatar{
        margin-top: 2px;
        padding: 0;
    }
    .loginBox>span[data-v-ef68022e]{
        padding: 0;
        margin-top: -1px;
    }



    /*昵称*/
    .nickname{
        border-left:1px solid #b3b1b1;
        padding-left: 10px;
        margin: 6px 0 0 8px;
        color: #000;
    }
    .loginBox{
        width: 152px;
        margin-right: 90px;
    }
    :root .ant-dropdown-trigger > .anticon.anticon-down, :root .ant-dropdown-link > .anticon.anticon-down{
        display: none;
    }
    .ant-dropdown-menu{
        width: 100px;
        text-align: center;
    }
    /*修改宽度和高度*/
    >>>.ant-modal-body{
        padding: 14px 24px;
    }
    >>>.ant-modal-content{
        box-sizing: border-box;
        padding: 10px;
        width: 360px;
        /*height: 309px;*/
    }
    .getUserName{
        padding-top: 16px;
    }
    >>>.ant-form-inline .ant-form-item{
        display: block;
    }
    >>>.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
        width: 100%;
    }
    .ant-form-inline .ant-form-item{
        margin-right: 0;
    }
    >>>.ant-form-item-children,
    .ant-btn-primary{
        width: 100%;
    }

    /*tab切换*/
    >>>.ant-tabs-bar {
        border-bottom: none;
    }
    >>>.ant-tabs-nav .ant-tabs-tab{
        margin: unset;
        width: 50%;
        text-align: center;
        border-bottom: 3px solid transparent;
    }
    >>>.ant-tabs-nav .ant-tabs-tab:hover{
        border-bottom: 3px solid #00cf8c;
    }
    >>>.ant-tabs-nav{
        width: 100%;
    }
    >>>.ant-form>div{
        margin-bottom: 20px;
    }

    /*验证码*/
    >>>.code{
        display: inline-block;
        width: 55%;
    }
    >>>.getCode{
        display: inline-block;
        border-radius: 5px;
        margin-left: 5%;
        width: 40%;
    }

    .loginFooter{
        overflow: hidden;
    }
    .registerNow{
        float: left;
    }
    .forgetPassword{
        float: right;
    }
    /*.getUserName{*/
    /*    margin-left: 200px;*/
    /*}*/
    /* 登录开始 */
    .loginBox{
        margin: 0 100px  0 0 ;
        float: right;
        overflow: hidden;
        width: 142.47px;
        height: 37px;
        box-sizing: border-box;
    }
    .loginBox>img,
    .loginBox>span{
        margin-top: 6px;
        float: left;
    }
    .loginBox>span{
        padding-left: 10px;
        font-size: 14px;
        margin-left: 8px;
        border-left:1px solid #b3b1b1;
    }
    .loginBox>div{
        float: right;
        text-align: center;
        line-height: 30px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #b8b5b5;
    }
    .car{
        width: 20px;
        height: 20px;
    }


    .ant-avatar>img{
        width: 100%;
        height: 100%;
    }

    /* 搜索结束 */
    /* 头部结束 */


    /* 立即注册模态框开始 */
    .modal-body{
        padding-left: 0!important;
    }
    .myModalContent{
        width: 380px;
        height: 524px!important;

    }
    .myModalContent .left{
        margin-left: 25%;
    }
    .getUserName{
        margin-top: -16px;
    }
    .getUserName>div{
        box-sizing: border-box;
        /* border: 1px solid blue; */
        /* margin-bottom: 24px; */
        overflow: hidden;
    }
    .prompt{
        padding-left: 90px;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        color: red;
    }
    .leftTitle{
        /* margin-left: -7px; */
        text-align: right;
        line-height: 34px;
        color: black!important;
        float: left;
        height: 34px;
        /* background-color: red; */
        width: 28%!important;
        z-index: 10;
    }
    .leftTitle>span{
        color: rgb(189, 6, 6);
    }
    >>>.rightCon{
        padding-left: 12px;
        color: rgb(94, 90, 90)!important;
        font-size: 13px!important;
        height: 34px!important;
        float: left;
        border-radius: 2px!important;
        width: 72%!important;
        outline: none;
        border: 1px solid #ccc;
    }
    #getPwd{
        width: 100%;
        color: white;
        background-color: #0fc490;
        border: 0;
        outline: none;
        height: 40px;
        border-radius: 3%;
    }
    .getSureCode:hover,
    #getPwd:hover{
        background-color: #00a879;
    }
    .getSureCode{
        border: 0;
        outline: none;
        background-color: #0fc490;
        border-radius: 3%;
        color: white;
    }
    .getLoginFooter{
        padding-top: 12px;
        text-align: right;
    }
    .choosePhone{
        padding-left: 10px;
        line-height: 32px;
        border: 1px solid #ddd;
        color: rgb(94, 90, 90)!important;
        font-size: 14px!important;
        background-color: #eee;
        box-sizing: border-box;
        float: left;
        border-right: 0!important;
        height: 34px!important;
        width: 22%!important;
        border-radius: 2px 0 0 2px!important;
    }
    .choosePhone img{
        margin-left: 12px;
    }
    .choosePhone:hover{
        cursor: pointer;
        color: rgb(94, 90, 90);
    }

    .sure{
        width: 34%!important;
    }
    .getUserName .sureBox>button{
        margin-left: 3%;
        width: 35%;
        font-size: 14px;
        height: 34px;
        border-radius: 2px;
        float: left;
    }
    .rightConPhone{
        box-sizing: border-box;
        border-radius: 0 2px 2px 0!important;
        width: 50%!important;
    }
    #getPwd{
        border-radius: 2px;
    }
    .myLoginAddFooter .goLogin{
        color: #666;
        margin-left: 260px!important;
    }

    /* 立即注册模态框结束 */
</style>